import {Component, Input, OnDestroy, OnInit} from "@angular/core";
import {SharedService} from "../shared-service";

declare var $: any;

@Component({
  template: `
    <div class="myalert" id="myalertRoom">
      <iframe frameBorder='1' marginHeight='0' marginWidth='0'></iframe>
      <div id="alertWin">
        <div class="fad alert alert-danger alert-dismissible" role="alert">
          <button type="button" class="close" aria-label="Close" (click)="closeAlert()"><span
            aria-hidden="true">&times;</span></button>
          <div class="warnIcon">
            <i class="fa fa-exclamation"></i>
          </div>
          <div class="msg">
            <strong id="danger_msg1"></strong>
          </div>
        </div>
        <div class="fad alert alert-success alert-dismissible" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
          <div class="successIcon">
            <i class="fa fa-check"></i>
          </div>
          <div class="msg">
            <strong id="success_msg1"></strong>
          </div>
        </div>
      </div>
    </div>

  `,
  styles: [
    ".myalert{width: 300px;height: auto;position: relative;}",
    "iframe{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;visibility: inherit;z-index: -1; filter: alpha(opacity=0);opacity: 0;}",
    ".warnIcon{position: absolute;left: 20px;top: 20px; width: 50px;height: 50px;border-radius: 50%;border: 1px solid red;color: red;line-height: 50px;font-size: 20px;text-align: center}",
    ".successIcon{position: absolute;left: 20px;top: 20px; width: 50px;height: 50px;border-radius: 50%;border: 1px solid #3598DC;color: #3598DC;line-height: 50px;font-size: 20px;text-align: center}",
    ".msg{width: auto;min-height: 60px;padding-left: 65px;padding-top: 20px;}"
  ]
})
export class MyAlertComponent implements OnInit, OnDestroy {


  closeAlert(): void {
    document.getElementById("myalertRoom").style.display = "none";
    $("#danger_msg1").html("");  // 警告内容1 清空
    $("#success_msg1").html(""); // 成功内容1 清空
  }

  constructor(private sharedService: SharedService) {
    this.sharedService.changeEmitted$.subscribe(resp => {
      const actiontype = resp.actiontype;
      const alerttype = resp.alerttype; // success 成功操作  warning 异常提示
      const msg = resp.msg;
      const msg2 = resp.msg2;
      if (actiontype == "myalert") {
        document.getElementById("myalertRoom").style.display = "block";
        $("#danger_msg1").html("");  // 警告内容1 清空
        $("#success_msg1").html(""); // 成功内容1 清空
        if (alerttype == "success") {
          $("#success_msg1").html(msg);
          $("#alertWin>div").eq(1).show();
          $("#alertWin>div").eq(0).hide();
        } else {
          $("#danger_msg1").html(msg);
          $("#alertWin>div").eq(1).hide();
          $("#alertWin>div").eq(0).show();
        }
        setTimeout(() => {
          document.getElementById("myalertRoom").style.display = "none";
        }, 1500);
      }
    });
  }

  ngOnInit() {
    this.closeAlert();
  }

  ngOnDestroy() {

  }

}
